 <main class="mdl-layout__content mdl-color--grey-100" >
        <div class="mdl-grid demo-content">

		  <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
            <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
              <use xlink:href="#piechart" mask="url(#piemask)" />
              <text font-family="Roboto" fill="#888" font-size="0.1" text-anchor="middle">
				<tspan x="0.5" y="0.45">注册会员</tspan>
				<tspan x="0.5" dy="0.2" fill="#fc5065" font-size="0.2">555</tspan>
				<tspan>位</tspan>
			  </text>
            </svg>

			<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
              <use xlink:href="#piechart" mask="url(#piemask)" />
              <text font-family="Roboto" fill="#888" font-size="0.1" text-anchor="middle">
				<tspan x="0.5" y="0.45">图书类型</tspan>
				<tspan x="0.5" dy="0.2" fill="#fc5065" font-size="0.2">{$category_count}</tspan>
				<tspan>种</tspan>
			  </text>
            </svg>


			<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
              <use xlink:href="#piechart" mask="url(#piemask)" />
              <text font-family="Roboto" fill="#888" font-size="0.1" text-anchor="middle">
				<tspan x="0.5" y="0.45">图书数量</tspan>
				<tspan x="0.5" dy="0.2" fill="#fc5065" font-size="0.2">{$book_count}</tspan>
				<tspan>本</tspan>
			  </text>
            </svg>
			

			<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
              <use xlink:href="#piechart" mask="url(#piemask)" />
              <text font-family="Roboto" fill="#888" font-size="0.1" text-anchor="middle">
				<tspan x="0.5" y="0.45">成交订单</tspan>
				<tspan x="0.5" dy="0.2" fill="#fc5065" font-size="0.2">328</tspan>
				<tspan>单</tspan>
			  </text>
            </svg>

          </div>


          <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col">
			<h4>订单信息</h4>
			<div class="demo-graph">
				<span class="demo-graph-span">已完成订单<span class="unit"><a href="###">50</a></span>单</span>
				<span class="demo-graph-span">待付款订单<span class="unit"><a href="###">50</a></span>单</span>
			</div>
			<div class="demo-graph">
				<span class="demo-graph-span">待发货订单<span class="unit"><a href="###">50</a></span>单</span>
				<span class="demo-graph-span">已发货订单<span class="unit"><a href="###">50</a></span>单</span>
			</div>
          </div>

		  <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col">
			<h4>用户信息</h4>
			<div class="demo-graph">
				<span class="demo-graph-span">共拥有用户<span class="unit"><a href="###">50</a></span>位</span>
				<span class="demo-graph-span">已购买商品用户<span class="unit"><a href="###">50</a></span> 位</span>
			</div>
			<div class="demo-graph">
				<span class="demo-graph-span">新注册用户<span class="unit"><a href="###">50</a></span>位</span>
				<span class="demo-graph-span">拥有用户最多的地区为<span class="unit">四川</span></span>
			</div>
          </div>

		  <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col">
			<h4>图书信息</h4>
			<div class="demo-graph">
				<span class="demo-graph-span">共销售图书<span class="unit"><a href="###">50</a></span>本</span>
				<span class="demo-graph-span">本月销售图书<span class="unit"><a href="###">50</a></span>本 </span>
			</div>
			<div class="demo-graph">
				<span class="demo-graph-span">购买数量最多的图书<span class="unit">《Golang网络编程》</span></span>
			</div>
			<div class="demo-graph">
				<span class="demo-graph-span">购买数量最少的图书<span class="unit">《三毛流浪记》</span> </span>
			</div>
          </div>


		</div>
      </main>  <!-- // end .mdl-layout__content -->

    </div><!-- // end .mdl-layout  -->



	<!-- start circle svg -->
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
        <defs>
          <mask id="piemask" maskContentUnits="objectBoundingBox">
            <circle cx=0.5 cy=0.5 r=0.49 fill="white" />
            <circle cx=0.5 cy=0.5 r=0.40 fill="black" />
          </mask>
          <g id="piechart">
            <circle cx=0.5 cy=0.5 r=0.5 />
            <path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
          </g>
        </defs>
      </svg> <!-- // end circle svg -->
</main>